<template>
    <div>
        <headNav title="面部识别照片"  ></headNav>
        
        <img  v-if="teacher.faceImgUrl" :src="teacher.faceImgUrl" class="face-img" alt="" srcset="">
        <img  v-else src="@/assets/img/my/default-face.jpg" class="face-img" alt="" srcset="">

        <div @click="upload" class="upload-btn" :class="{'active': isUpload}">上传我的面部识别照片</div>

         <div class="desc">面部识别照片每30天允许变更一次，请慎重操作</div>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import {getTeacher, checkUpdateFaceImage} from '@/api/faceApi'
export default {
    components: {
        headNav
    },
    computed: {
        teacherId () {
            return this.$store.state.user.teacherId
        }
    },
    data () {
        return {
            teacher: '',
            isUpload: false
        }
    },
    methods: {
        async upload(){
            if(!this.isUpload){
                this.$vux.toast.text('面部识别照片每30天允许变更一次')
                return
            }

           
            await this.$store.dispatch('media/getFaceImg')

            //  this.$vux.loading.show({
            //         text: '加载中'
            //     })

            //     await this.$store.dispatch('media/startUploadImage')
            
            //     await this.$store.dispatch('media/uploadServeId')
            

            this.$router.push("preview")
        },
        preview () {
            wx.previewImage({
                current: this.teacher.faceImgUrl, 
                urls: [this.teacher.faceImgUrl]
            });
        },
        async check(){
            let res = await checkUpdateFaceImage(this.teacherId)
            this.isUpload = true
        }
    },
    async mounted(){
     
        let res = await getTeacher(this.teacherId)
        console.log(res)
        this.teacher = res
        this.$store.commit('myInfo/setFaceTeacher', res)

        this.check()
    }
    
}
</script>
<style scoped>
.face-img{
    width: 6rem; height: 8rem;
    margin: 0.2rem auto;
    display: block;
    object-fit: contain;
}
.upload-btn{
    background: #6d6d6d; color: #FFF;
    text-align: center; padding: 0.2rem 0;
    width: 5rem; margin: 0 auto;
    font-size: 0.32rem;
}
.upload-btn.active{
    background: #128FEF;
}

.desc{
    padding: 0.3rem 0 0 0; text-align: center;
    color: #6d6d6d;
}
</style>